import './index.css'
import { Button } from 'antd';
import React,{useState} from 'react';
import {InfoCircleOutlined, } from '@ant-design/icons';
let Mapower = () => {
    const [currentId4, setCurrentId4] = useState(1)
  const options4 = [

        { label: "图片", id: 1 },
    { label: "插画", id: 2 },
    ]
      const changeId4 = (id) => {
    setCurrentId4(id)
  }
    return (
        <div>
                <div style={{width:'100%',height:'65px',borderBottom:'1px solid #ccc',color:'#fff',lineHeight:'65px',marginBottom:'15px'}}>
                  <span style={{marginLeft:'15px'}}>魔力素材生成器</span>
                  <InfoCircleOutlined style={{float:'right',marginRight:'15px',marginTop:'27px'}} />
                </div>

                 {options4.map((item) => {
                          return (
                              <div key={item.id} onClick={() => changeId4(item.id)} className={item.id == currentId4 ? "active" : ""}>
                                      <div className='fxndyy' style={{float:'left'}}>{item.label}</div>
                            </div>
          )
                 })}
                <div style={{width:'100%',height:'435px',overflowX:'hidden',overflowY:'scroll'}}>
                  <div style={{ display: currentId4 == 1 ? "block" : "none" }}>
                    <b style={{color:'#fff',margin:'15px'}}>描述你要创建的内容</b>
                    <div style={{ width: '90%', height: '120px', border: '1px solid #fff', margin: '20px' }}>
                      <p style={{color:'#ccc'}}>描述想要生成的内容,比如主体、背景、颜色、风格等</p>
                       <Button ghost style={{color:'#fff',margin:'15px'}}>给我灵感</Button>
                    </div>
                    <div style={{width:'100%',height:'300px',color:'#fff'}}>
                      <div style={{ margin: '20px' }}><b>风格</b><span style={{ float: 'right' }}>查看更多</span></div>
                      <ul style={{margin:'10px 10px 10px 20px',float:'left'}}>
                        <li style={{ width: '95px', height: '95px', border: '1px solid #A570FF', borderRadius:'10px'}}></li>
                        <li style={{marginLeft:'40px'}}>无</li>
                      </ul>
                      <ul style={{margin:'10px',float:'left'}}>
                        <li style={{ width: '95px', height: '95px', borderRadius: '10px' }}>
                        <img style={{width:'100%',height:'100%',borderRadius:'10px'}} src='https://ingredient-generation-assets.canva.cn/style_filmic_sdxl.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAUMDQBKPSJDHGIOUN%2F20240725%2Fcn-north-1%2Fs3%2Faws4_request&X-Amz-Date=20240725T003540Z&X-Amz-Expires=92951&X-Amz-Signature=a9e37d1ac2ce8c5f424a081fb8b36bb2a27966d8a92f73e6f5f9b684f21472f9&X-Amz-SignedHeaders=host%3Bx-amz-expected-bucket-owner&response-expires=Fri%2C%2026%20Jul%202024%2002%3A24%3A51%20GMT' />
                        </li>
                        <li style={{width:'95px',textAlign:'center'}}>电影感</li>
                      </ul>
                      <ul style={{margin:'10px',float:'left'}}>
                        <li style={{ width: '95px', height: '95px', borderRadius: '10px' }}>
                       <img style={{width:'100%',height:'100%',borderRadius:'10px'}} src='https://ingredient-generation-assets.canva.cn/style_dreamy_sdxl.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAUMDQBKPSJDHGIOUN%2F20240724%2Fcn-north-1%2Fs3%2Faws4_request&X-Amz-Date=20240724T141637Z&X-Amz-Expires=128834&X-Amz-Signature=93f5787454f6543415c62cbe7e801cb28f78116ff3e0f2b66fad1ad34bd25466&X-Amz-SignedHeaders=host%3Bx-amz-expected-bucket-owner&response-expires=Fri%2C%2026%20Jul%202024%2002%3A03%3A51%20GMT' />
                        </li>
                        <li style={{width:'95px',textAlign:'center'}}>梦幻</li>
                      </ul>
                       <ul style={{margin:'10px 10px 10px 20px',float:'left'}}>
                        <li style={{ width: '95px', height: '95px', borderRadius: '10px' }}>
                         <img style={{width:'100%',height:'100%',borderRadius:'10px'}} src='https://ingredient-generation-assets.canva.cn/style_watercolor_sdxl.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAUMDQBKPSJDHGIOUN%2F20240724%2Fcn-north-1%2Fs3%2Faws4_request&X-Amz-Date=20240724T201800Z&X-Amz-Expires=108962&X-Amz-Signature=efb69b3b27eb9bbd3e2f4868ef8ff004f709a2efcfd847914b49fe8c6f128d41&X-Amz-SignedHeaders=host%3Bx-amz-expected-bucket-owner&response-expires=Fri%2C%2026%20Jul%202024%2002%3A34%3A02%20GMT' />
                        </li>
                        <li style={{width:'95px',textAlign:'center'}}>水彩</li>
                      </ul>
                      <ul style={{margin:'10px',float:'left'}}>
                        <li style={{ width: '95px', height: '95px', borderRadius: '10px' }}>
                        <img style={{width:'100%',height:'100%',borderRadius:'10px'}} src='https://ingredient-generation-assets.canva.cn/style_long_exposure_sdxl.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAUMDQBKPSJDHGIOUN%2F20240724%2Fcn-north-1%2Fs3%2Faws4_request&X-Amz-Date=20240724T192754Z&X-Amz-Expires=111354&X-Amz-Signature=4633672d490a0688c36075fd52a5b611ee87075bffa7b1d8831d6126474b110c&X-Amz-SignedHeaders=host%3Bx-amz-expected-bucket-owner&response-expires=Fri%2C%2026%20Jul%202024%2002%3A23%3A48%20GMT' />
                        </li>
                        <li style={{width:'95px',textAlign:'center'}}>照片</li>
                      </ul>
                      <ul style={{margin:'10px',float:'left'}}>
                        <li style={{ width: '95px', height: '95px', borderRadius: '10px' }}>
                        <img style={{width:'100%',height:'100%',borderRadius:'10px'}} src='https://ingredient-generation-assets.canva.cn/style_long_exposure_sdxl.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAUMDQBKPSJDHGIOUN%2F20240724%2Fcn-north-1%2Fs3%2Faws4_request&X-Amz-Date=20240724T192754Z&X-Amz-Expires=111354&X-Amz-Signature=4633672d490a0688c36075fd52a5b611ee87075bffa7b1d8831d6126474b110c&X-Amz-SignedHeaders=host%3Bx-amz-expected-bucket-owner&response-expires=Fri%2C%2026%20Jul%202024%2002%3A23%3A48%20GMT' />
                        </li>
                        <li style={{width:'95px',textAlign:'center'}}>长曝光</li>
                      </ul>
                    </div>
                  </div>
                  <div style={{ display: currentId4 == 2 ? "block" : "none" }}>
                  <b style={{color:'#fff',margin:'15px'}}>描述你要创建的内容</b>
                    <div style={{ width: '90%', height: '120px', border: '1px solid #fff', margin: '20px' }}>
                      <p style={{color:'#ccc'}}>描述想要生成的内容,比如主体、背景、颜色、风格等</p>
                       <Button ghost style={{color:'#fff',margin:'15px'}}>给我灵感</Button>
                    </div>
                    <div style={{width:'100%',height:'300px',color:'#fff'}}>
                      <div style={{ margin: '20px' }}><b>风格</b><span style={{ float: 'right' }}>查看更多</span></div>
                      <ul style={{margin:'10px 10px 10px 20px',float:'left'}}>
                        <li style={{ width: '95px', height: '95px', border: '1px solid #ccc', borderRadius:'10px'}}></li>
                        <li style={{marginLeft:'40px'}}>无</li>
                      </ul>
                      <ul style={{margin:'10px',float:'left'}}>
                        <li style={{ width: '95px', height: '95px', border: '1px solid #ccc', borderRadius: '10px' }}>
                        <img style={{width:'100%',height:'100%',borderRadius:'10px'}} src='https://ingredient-generation-assets.canva.cn/style_filmic_sdxl.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAUMDQBKPSJDHGIOUN%2F20240725%2Fcn-north-1%2Fs3%2Faws4_request&X-Amz-Date=20240725T003540Z&X-Amz-Expires=92951&X-Amz-Signature=a9e37d1ac2ce8c5f424a081fb8b36bb2a27966d8a92f73e6f5f9b684f21472f9&X-Amz-SignedHeaders=host%3Bx-amz-expected-bucket-owner&response-expires=Fri%2C%2026%20Jul%202024%2002%3A24%3A51%20GMT' />
                        </li>
                        <li style={{marginLeft:'40px'}}>3D镀铬</li>
                      </ul>
                      <ul style={{margin:'10px',float:'left'}}>
                        <li style={{ width: '95px', height: '95px', border: '1px solid #ccc', borderRadius: '10px' }}>
                       <img style={{width:'100%',height:'100%',borderRadius:'10px'}} src='https://ingredient-generation-assets.canva.cn/style_doodle.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAUMDQBKPSJDHGIOUN%2F20240722%2Fcn-north-1%2Fs3%2Faws4_request&X-Amz-Date=20240722T092059Z&X-Amz-Expires=143921&X-Amz-Signature=d4f1abcd946550b4d1a2843d809ae067c8bf3a708eaad5f3b4b477637926fe57&X-Amz-SignedHeaders=host%3Bx-amz-expected-bucket-owner&response-expires=Wed%2C%2024%20Jul%202024%2001%3A19%3A40%20GMT' />
                        </li>
                        <li style={{marginLeft:'40px'}}>涂鸦</li>
                      </ul>
                       <ul style={{margin:'10px 10px 10px 20px',float:'left'}}>
                        <li style={{ width: '95px', height: '95px', border: '1px solid #ccc', borderRadius: '10px' }}>
                         <img style={{width:'100%',height:'100%',borderRadius:'10px'}} src='https://ingredient-generation-assets.canva.cn/style_sticker.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAUMDQBKPSJDHGIOUN%2F20240722%2Fcn-north-1%2Fs3%2Faws4_request&X-Amz-Date=20240722T011618Z&X-Amz-Expires=175409&X-Amz-Signature=a574d9f5482f36668f22c9e731a13632447a4c3be6cf8644106d6da575787403&X-Amz-SignedHeaders=host%3Bx-amz-expected-bucket-owner&response-expires=Wed%2C%2024%20Jul%202024%2001%3A59%3A47%20GMT' />
                        </li>
                        <li style={{marginLeft:'40px'}}>贴纸</li>
                      </ul>
                      <ul style={{margin:'10px',float:'left'}}>
                        <li style={{ width: '95px', height: '95px', border: '1px solid #ccc', borderRadius: '10px' }}>
                        <img style={{width:'100%',height:'100%',borderRadius:'10px'}} src='https://ingredient-generation-assets.canva.cn/style_hand_drawn.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAUMDQBKPSJDHGIOUN%2F20240722%2Fcn-north-1%2Fs3%2Faws4_request&X-Amz-Date=20240722T165347Z&X-Amz-Expires=116245&X-Amz-Signature=618ca4e9e1e169fc0c723dce030d4c361b913b53578ca6efbe131ea444563a3b&X-Amz-SignedHeaders=host%3Bx-amz-expected-bucket-owner&response-expires=Wed%2C%2024%20Jul%202024%2001%3A11%3A12%20GMT' />
                        </li>
                        <li style={{marginLeft:'40px'}}>手绘</li>
                      </ul>
                      <ul style={{margin:'10px',float:'left'}}>
                        <li style={{ width: '95px', height: '95px', border: '1px solid #ccc', borderRadius: '10px' }}>
                        <img style={{width:'100%',height:'100%',borderRadius:'10px'}} src='https://ingredient-generation-assets.canva.cn/style_line_art.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAUMDQBKPSJDHGIOUN%2F20240722%2Fcn-north-1%2Fs3%2Faws4_request&X-Amz-Date=20240722T141649Z&X-Amz-Expires=127406&X-Amz-Signature=6503eec26d43d99aabb6060736f7d65e0b31b1e252a944d0e2624b74d742cd21&X-Amz-SignedHeaders=host%3Bx-amz-expected-bucket-owner&response-expires=Wed%2C%2024%20Jul%202024%2001%3A40%3A15%20GMT' />
                        </li>
                        <li style={{marginLeft:'40px'}}>线条艺术</li>
                      </ul>
                    </div>
                  </div>
                  
                </div>  
                <div style={{ width: '100%', height: '80px'}}>
                <Button style={{backgroundColor:'#343536',color:'#838284',width:'93%',height:'40px',margin:'15px'}}>生成图片</Button>
                </div>
        </div>
)
}

export default Mapower